<template>
	<view class="container">
		<view class="text-xxl" style="position: fixed; left: 40rpx;top: 100rpx;color: black;z-index: 99;">
			<text @click="goBack" class="cuIcon-back" ></text>
		</view>
		
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">经验详情</block>
		</cu-custom>
		
		<!-- banner -->
		<view v-if="false" class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" style="height: 450rpx;" circular="true" indicator-dots="true" autoplay="true" interval="3500"
						duration="600">
						<swiper-item class="swiper-list" v-for="(item, index) in bannerList" :key="index">
							<view class="swiper-item uni-bg-red">
								<image class="swiper-img" :src="item.imageUrl" mode="aspectFill"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		
		<view class="padding radius bg-white">
			<view class="text-bold text-lg text-black">{{dataDetail.Title}}</view>
			<view class="text-gray text-sm" style="margin-top:10rpx;">
				<text class="margin-right-xs">{{dataDetail.Faultesc}}</text>
				<!-- <text>18人收藏</text> -->
			</view>
			<view class="margin-tb-sm">
				<view class='bg-blue cu-tag radius light lg margin-right-xs'>{{dataDetail.FaultTypeName}}</view>
				<!-- <view class='bg-cyan cu-tag radius light sm'>99新</view> -->
			</view>
			
			<!-- <view class="margin-tb-sm" style="position: relative;">
				<text class="text-orange text-bold text-xxl margin-right-xs">￥9.00 / </text>
				<text class="text-orange text-df margin-right-xs">日</text>
				<text class="text-gray text-sm" style="text-decoration:line-through;">市场价：￥3325</text>
				
				<view class="scoreBox">
					<text class="text-yellow text-xl text-bold">5.0</text>
					<view class="text-yellow text-xs flex justify-around">
						<uni-text class="text-yellow cuIcon-favorfill"></uni-text>
						<uni-text class="text-yellow cuIcon-favorfill"></uni-text>
						<uni-text class="text-yellow cuIcon-favorfill"></uni-text>
						<uni-text class="text-yellow cuIcon-favorfill"></uni-text>
						<uni-text class="text-yellow cuIcon-favorfill"></uni-text>
					</view>
					<text class="text-sm text-bold" style="color: #666666;">经验评分</text>
				</view>
			</view> -->
			
			<!-- <view class="bg-white">
				<view class="flex justify-around padding-sm solid serviceBox">
					<view class="text-gray">
						<image src='https://cdn.zhoukaiwen.com/zhengpin.svg' mode='widthFix'></image>
						<text>正品保证</text>
					</view>
					<view class="text-gray">
						<image src='https://cdn.zhoukaiwen.com/qianggou.svg' mode='widthFix'></image>
						<text>租期自由</text>
					</view>
					<view class="text-gray">
						<image src='https://cdn.zhoukaiwen.com/shandan.svg' mode='widthFix'></image>
						<text>质量保证</text>
					</view>
				</view>
			</view> -->
		</view>
		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">详细信息</text>
				<text class="text-ABC text-blue"></text>
			</view>
		</view>
		<view class="bg-white padding-bottom text-df">
			<view class='padding-bottom-sm bg-white' style="overflow: hidden;">
				<view class="uni-common-mt" style="background:#FFF; padding:20rpx;">
					<rich-text :nodes="dataDetail.Content"></rich-text>
				</view>
			</view>
		</view>
		
		<view class="bg-white padding margin-top-sm">
			<text class="text-bold text-black">维修流程</text>
			<view class="flex justify-between margin">
				<view class="text-center text-gray" style="position: relative;">
					<view class="procedureIcon">
						<uni-text class="cuIcon-upload"></uni-text>
					</view>
					<view class="margin-top-xs">上报</view>
					<image class="rightIcon" src="https://cdn.zhoukaiwen.com/icon_right.svg" mode="widthFix"></image>
				</view>
				
				<view class="text-center text-gray" style="position: relative;">
					<view class="procedureIcon">
						<uni-text class="cuIcon-message"></uni-text>
					</view>
					<view class="margin-top-xs">通知</view>
					<image class="rightIcon" src="https://cdn.zhoukaiwen.com/icon_right.svg" mode="widthFix"></image>
				</view>
				
				<view class="text-center text-gray" style="position: relative;">
					<view class="procedureIcon">
						<uni-text class="cuIcon-shake"></uni-text>
					</view>
					<view class="margin-top-xs">处理</view>
					<image class="rightIcon" src="https://cdn.zhoukaiwen.com/icon_right.svg" mode="widthFix"></image>
				</view>
				
				<view class="text-center text-gray" style="position: relative;">
					<view class="procedureIcon">
						<uni-text class="cuIcon-send"></uni-text>
					</view>
					<view class="margin-top-xs">结案</view>
				</view>
			</view>
		</view>
		
		
		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">简要信息</text>
				<text class="text-ABC text-blue"></text>
			</view>
		</view>
		<view class="bg-white padding-lr padding-bottom text-df">
		  <view class="padding-xs">
		    <text class="text-grey">名称</text>
		    <text class="text-black text-bold">{{dataDetail.Title}}</text>
		  </view>
		  <view class="padding-xs">
		    <text class="text-grey">简要描述</text>
		    <text class="text-black text-bold">{{dataDetail.Faultesc}}</text>
		  </view>
		  <view class="padding-xs">
		    <text class="text-grey">类型</text>
		    <text class="text-black text-bold">{{dataDetail.FaultTypeName}}</text>
		  </view>
		  <view class="padding-xs">
		    <text class="text-grey">添加日期</text>
		    <text class="text-black text-bold">{{dataDetail.AddTime}}</text>
		  </view>
		</view>
		
		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">文件</text>
				<text class="text-ABC text-blue"></text>
			</view>
		</view>
		<view class="bg-white padding">
			<view class="cu-list menu" style="border: none !important;">
				<view v-if="dataDetail.FilesArrys.length < 1" class="padding text-center text-grey">暂无数据</view>
				<view  v-for="(item,index) in dataDetail.FilesArrys">
					<view class="cu-item" style="padding: 0;">
						<view class="content" style="float: left;width: 80%;overflow: hidden;height: 40px;line-height: 40px;">
							<text class="text-lg">{{item.split('/')[item.split('/').length-1]}}</text>
						</view>
						<view class="action"  style="float: left;width: 20%;height: 40px;line-height: 40px;">
							<button @click="openDocument(item)" class="cu-btn round sm shadow bg-green margin-left">查看</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view style="height: 150rpx; width: 1rpx;"></view>
		
		<!-- <view class="cu-bar bg-white tabbar border shop solid-top" style="position: fixed; bottom: 0;width: 100%; z-index: 9999;">
			<button class="action" open-type="share">
				<view class="cuIcon-share text-green">
					<view class="cu-tag badge"></view>
				</view> 分享
			</button>
			<view class="action text-orange">
				<view class="cuIcon-favorfill"></view> 已收藏
			</view>
			<view class="btn-group">
				<button open-type="contact" style="width: 80%;" class="cu-btn bg-gradual-blue round shadow-blur">沟通预约</button>
			</view>
		</view> -->
		
	</view>
</template>

<script>
	import request from '@/common/request.js';
	export default {
		data() {
			return {
				bannerList: [{
						imageUrl: 'https://zhoukaiwen.com/img/qh/dior.jpg'
					},
					{
						imageUrl: 'https://zhoukaiwen.com/img/qh/dior.jpg'
					}
				],
				dataDetail:{
					FilesArrys:[]
				}
			}
		},
		onLoad(options) {
			console.log(options)
			let that=this
			that.getQrcodeInformationDetail(options.id)
		},
		onShow() {
			var that = this;
		},
		mounted() {
			
		},
		methods: {
			getData(id){
				let opts = {
					url: 'api/circle.Areas/info',
					method: 'get'
				};
				let params = {
					"circle_areas_id": id,
				}
				
				uni.showLoading({
					title: '加载中'
				})
				request.httpRequest(opts,params).then(res => {
					console.log(res);
					uni.hideLoading();
					if (res.data.code == 200) {
						this.jlPplData = res.data.data;
					} else {
						uni.showToast({
							title: '数据错误！',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			goBack(){
				uni.navigateBack({
					delta: 1
				})
			},
			openDocument(url){
				console.log(this.$request22.baseUrl1+url)
				uni.downloadFile({
					url: this.$request22.baseUrl1+url,
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: function(res) {
							}
						});
					}
				})
			},
			getQrcodeInformationDetail(id){
				uni.showLoading({
					title: '加载中'
				})
				var that = this;
				let opts = {
					url: 'api/GetQrcodeFaultDetail',
					method: 'get'
				};
				let params={
					id:id
				}
				request.httpTokenRequest(opts,params).then(res => {
					uni.hideLoading();
					if(res.data.code == 1){
						that.dataDetail=res.data.data;
						that.dataDetail.baseUrl=that.$request22.baseUrl1
						console.log(that.dataDetail)
						uni.hideLoading();
					}
					else{
						if(res.data.code ==306){
							setTimeout(() => {
								 uni.reLaunch({
								 	url: '/pages/qrcode/login?id='+id
								 });
							}, 0)
						}else{
							uni.showToast({ title: res.data.msg, icon: 'none' });
						}
					}
				});
			},
			goPreviewImage(url,baseurl){
				let urls=[]
				for(let i=0;i<url.length;i++){
					urls.push(baseurl+url[i])
				}
				uni.previewImage({
					current:0,
					urls:urls
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-box {
		flex: 1;
	}
	
	.swiper-item {
		height: 100%;
	}
	.scoreBox{
		position: absolute;
		right: 0;
		bottom: 0;
		width: 142rpx;
		height: 142rpx;
		border-radius: 20rpx;
		background-color: #f9f9f9;
		text-align: center;
		padding: 12rpx 10rpx;
		border: 3rpx solid #EEEEEE;
		display: flex;
		flex-flow: column;
		justify-content: space-between;
	}
	.serviceBox{
		border-radius: 25rpx;
		background-color: #f9f9f9; 
		margin: 30rpx auto 0;
		image{
			width: 42rpx;
			height: 42rpx;
			margin-right: 8rpx;
			vertical-align:middle;
			margin-top: -6rpx;
		}
	}
	.procedureIcon{
		width: 85rpx;
		height: 85rpx;
		line-height: 85rpx;
		text-align: center;
		border-radius: 50%;
		font-size: 48rpx;
		color: #666666;
		background-color: #EEEEEE;
	}
	.rightIcon{
		width: 36rpx;
		position: absolute;
		right: -38px;
		top: 25rpx;
	}
	
	
	
	.bg-white.padding-lr.padding-bottom.text-df {
	  display: block; /* 确保容器是垂直排列 */
	}
	
	.bg-white.padding-lr.padding-bottom.text-df > .padding-xs {
	  display: flex; /* 设置每行的布局 */
	  justify-content: flex-start; /* 左侧对齐 */
	  align-items: flex-start; /* 顶部对齐 */
	}
	
	.text-grey {
	  flex: 0 0 90px; /* 固定宽度 */
	  letter-spacing: 1rpx;
	  white-space: nowrap; /* 防止文字换行 */
	}
	
	.text-black.text-bold {
	  flex-grow: 1; /* 右侧文字自适应剩余空间 */
	  word-wrap: break-word; /* 允许换行 */
	}


</style>
